<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>日报管理系统</title>
    <!--    syh-->
    <link rel="stylesheet" href="/static/paper/plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="/static/paper/styles/index.css"/>

    <!--&lt;!&ndash;zzy&ndash;&gt;-->
    <!--    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />-->
    <!--    <link rel="stylesheet" href="../../styles/page.css" />-->
    <!--    <link rel="stylesheet" href="../../styles/zgs.css">-->
    <style>
        .header {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            height: 100px; /* 如果需要指定高度 */
        }

        img {
            width: 700px; /* 控制图片的宽度 */
            height: 80px; /* 控制图片的高度 */
        }

        .layout-container {
            top: 50px;
            position: relative;
            display: flex;
            justify-content: center; /* 添加此行以使子元素居中 */
            margin-left: auto;
            margin-right: auto;
            flex-wrap: wrap; /* 允许子元素换行 */
            gap: 15px; /* 设置列之间的间距为 15px */
        }

        .left-section {
            width: 40%; /* 之前调整为原来的 80% 左右 */
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 300px; /* 设定最小高度，可根据需要调整 */
            height: auto; /* 允许高度根据内容自适应 */
            box-sizing: border-box; /* 使元素的宽高计算包含 padding 和 border */
            /* 移除 margin-right */
        }

        .zgs-card-div {
            width: 40%; /* 之前调整为原来的 80% 左右 */
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 300px; /* 设定最小高度，可根据需要调整 */
            height: auto; /* 允许高度根据内容自适应 */
            box-sizing: border-box; /* 使元素的宽高计算包含 padding 和 border */
        }

        .box-card {
            border: none;
            border-radius: 5px;
            padding: 10px;
            background-color: #f9f9f9;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 100%;
            height: 100%; /* 让卡片填满父容器 */
        }

        .date-picker-wrapper {
            border: none;
            border-radius: 0;
            padding: 10px;
            background-color: #f9f9f9;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 100%;
        }

        /*.el-progress--circle {*/
        /*    color: #00aeff;*/
        /*}*/

        /*.el-progress-circle__path {*/
        /*    stroke: #00aeff;*/
        /*}*/

        .dashboard-container {
            background-color: #ffffff;
            margin: 20px;
            padding: 30px;
            height: 770px;
            position: relative; /* 设置为相对定位 */
        }

        .button-wrapper {
            position: absolute; /* 设置为绝对定位 */
            bottom: 20px; /* 距离底部 20 像素 */
            right: 20px; /* 距离右侧 20 像素 */
        }
    </style>
</head>
<body>
<div class="dashboard-container" id="home-app"
     style="background-color: #ffffff; margin: 20px; padding: 30px; height: 770px;">
    <div class="header">
        <img src="/static/paper/images/login/logo.png" style="width: 700px; height: 80px">
    </div>


    <div class="layout-container">
        <div class="left-section">
            <div class="date-picker-wrapper">
                <span style="color: red;" title="请选择要查看的日期">*</span>
                <el-date-picker
                        v-model="selectedDate"
                        type="date"
                        placeholder="选择日期"
                        @change="onDateChange"
                >
                </el-date-picker>
            </div>
            <el-card class="box-card">
                <div slot="header" class="clearfix" align="center">
                    <span v-if="">{{ selectedDate }}</span><span> 日报提交情况</span>
                    <!--                    <span>提交数目: {{ submittedCount }}</span>-->
                </div>
                <div class="item zgs-progress-div" align="center">
                    <el-progress type="circle" :percentage="submissionRate" :width="300"
                                 :color="getProgressColor(submissionRate)"></el-progress>
                </div>
            </el-card>
        </div>
        <div class="zgs-card-div">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <el-tag v-if="isRestDay" type="info" style="margin-right: 10px;">休息</el-tag>
                    <span v-else>未提交人员</span>
                </div>
                <div style="display: inline-block; height: 150px; line-height: 40px;">
                    <el-tag style="background-color: #ffeeba; color: #333;">职工</el-tag>
                    <span v-for="item in noSubData.employee" :key="item.id" class="text item">
                        <a :href="'../category/particular.html?em_id=' + item.id"
                           style="text-decoration: none; color: inherit;"
                           onmouseover="this.style.textDecoration='underline';"
                           onmouseout="this.style.textDecoration='none';">
                            {{ item.name }}
                        </a>
                    </span>
                </div>
                <el-divider></el-divider>
                <div style="display: inline-block; height: 100px; line-height: 40px;">
                    <el-tag style="background-color: #cce5ff; color: #333;">学生</el-tag>
                    <span v-for="item in noSubData.student" :key="item.id" class="text item">
                        <a :href="'../category/particular.html?em_id=' + item.id"
                           style="text-decoration: none; color: inherit;"
                           onmouseover="this.style.textDecoration='underline';"
                           onmouseout="this.style.textDecoration='none';">
                            {{ item.name }}
                        </a>
                    </span>
                </div>
            </el-card>
        </div>
    </div>

    <div class="button-wrapper">
        <span style="color: red;" title="点击可手动更新数据">*</span>
        <el-button type="primary" class="blue-button" @click="open">手动更新</el-button>
    </div>
</div>
<!--syh-->
<script src="/static/paper/plugins/vue/vue.js"></script>
<script src="/static/paper/plugins/element-ui/index.js"></script>
<script src="/static/paper/plugins/axios/axios.min.js"></script>

<!--&lt;!&ndash;zzy&ndash;&gt;-->
<!--<script src="../../plugins/vue/vue.js"></script>-->
<!--<script src="../../plugins/element-ui/index.js"></script>-->
<!--<script src="../../plugins/axios/axios.min.js"></script>-->
<!--<script src="../../js/request.js"></script>-->
<!--<script src="../../api/home.js"></script>-->
<script>
    new Vue({
        el: '#home-app',
        data() {
            return {
                initialDate: this.getYesterdayDate(), // 初始日期为昨天
                selectedDate: '', // 选择的日期
                noSubData: {
                    employee: [], // 存放未交的职工
                    student: []  // 存放未交的学生
                },
                submittedCount: '', // 提交数目
                submissionRate: 0, // 提交率
                isRestDay: false, // 是否为休息日
                restDayMessage: ''
            }
        },
        created() {
            this.selectedDate = this.initialDate; // 初始化时将选定日期设置为初始日期
            this.fetchData(); // 初始化时获取数据
        },
        methods: {
            getYesterdayDate() {
                const date = new Date();
                date.setDate(date.getDate() - 1); // 设置为前一天
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
                const day = String(date.getDate()).padStart(2, '0'); // 补零
                return `${year}-${month}-${day}`; // 返回格式化后的字符串
            },
            getProgressColor(value) {
                if (value === 100) return '#31aa74'; // 绿色
                if (value >= 70) return '#FEA443'; // 橙色
                if (value >= 50) return '#881400'; // 红色
                return '#A9ACB2'; // 灰色
            },
            onDateChange(date) {
                // 将选择的日期格式化为 YYYY-MM-DD
                console.log("onDateChange下打印date/上", date)
                this.selectedDate = date.toLocaleDateString('en-CA');
                console.log("onDateChange下打印date/下", this.selectedDate)
                this.fetchData(); // 选择日期后立即获取数据
            },
            fetchData() {
                const date = this.selectedDate;
                if (!date) return; // 如果没有选择日期，则不进行请求
                console.log("打印date:", date);
                // 清空旧数据
                this.noSubData.employee = []; // 清空未提交的老师名单
                this.noSubData.student = []; // 清空未提交的学生名单
                this.submittedCount = ''; // 清空提交数目
                this.submissionRate = 0; // 清空提交率
                this.isRestDay = false; // 重置是否为休息日的状态
                this.restDayMessage = ''; // 清空休息日消息
                axios.post('/daypaper/submission_rate', {date})
                    .then(({data: res}) => { // 将 data 重命名为 res
                        if (res.status === "success") {
                            const responseData = res.data; // 提取实际的数据部分
                            if (responseData) {
                                this.submittedCount = responseData["提交数目"]; // 提交数目
                                this.submissionRate = parseInt(responseData["提交率"]); // 提交率，省略小数点
                                console.log('打印提交率', this.submissionRate)
                                this.noSubData.employee = responseData["未提交名单"]["职工"].ids.map((id, index) => ({
                                    id: id,
                                    name: responseData["未提交名单"]["职工"].names[index]
                                }));

                                this.noSubData.student = responseData["未提交名单"]["学生"].ids.map((id, index) => ({
                                    id: id,
                                    name: responseData["未提交名单"]["学生"].names[index]
                                }));
                                console.log("打印nosubdata:", this.noSubData)
                                this.isRestDay = false; // 如果有数据，设置为非休息日
                            } else {
                                this.isRestDay = true; // 如果没有数据，设置为休息日
                                this.restDayMessage = res.msg; // 保存后端传来的消息
                            }
                        } else {
                            this.$notify.warning({
                                title: '警告',
                                message: res.msg,
                                offset: 50
                            });
                        }
                    })
                    .catch(error => {
                        console.error('获取数据时出错:', error);
                    });
            },
            open() {
                this.$alert('若缺失日报数据，可以手动更新', '更新日报', {
                    confirmButtonText: '更新',
                    callback: action => {
                        if (action === 'confirm') {
                            const loading = this.$loading({
                                lock: true,
                                text: '日报更新中',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                            })
                            this.updateDaypaper(loading); // 调用更新日报的方法
                            // loading.close()  //关闭指示器
                        } else {
                            this.$message.warning({
                                showClose: true,
                                message: "已取消"
                            })
                        }
                    }
                });
            },
            updateDaypaper(loading) {
                // 发送 GET 请求
                fetch('/daypaper/update_daypaper', {
                    method: 'POST', // 设置请求方法为 POST
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded' // 设置请求头为表单数据
                    },
                    body: new URLSearchParams({}) // 发送空的表单数据
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('网络响应不成功');
                        }
                        return response.json(); // 假设服务器返回 JSON 数据
                    })
                    .then(data => {
                        // 根据返回的数据更新状态或显示消息
                        if (data.status === 'success') {
                            this.$notify.success({
                                title: "更新成功",
                                message: data.msg
                            });
                            console.log(data); // 打印返回的数据，供调试使用
                            this.fetchData(); // 选择日期后立即获取数据
                        } else {
                            this.$message.error({
                                message: data.msg
                            })
                        }

                    })
                    .catch(error => {
                        this.$message({
                            type: 'error',
                            message: `更新日报失败: ${error.message}`
                        });
                    })
                    .finally(() => {
                        loading.close(); // 关闭加载指示器
                    });
            }
        }
    });
</script>
</body>
</html>
